<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head> 
	<meta name="decorator" content="moduleList"/> 
	<link href="${staticPath}/lib/datetimepicker/0.0.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
	<link href="${staticPath}/lib/chosen/1.1.0/chosen.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="${staticPath}/lib/ztree/3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
	<ol class="breadcrumb">
		<li><a href="${contextPath}/index">首页</a></li>
		<li><a href="${contextPath}/biz/example/form/elements?navId=${navId}">流程管理</a></li>
		<li class="active">表单元素</li>
	</ol>
	<div class="panel panel-default">
				  <div class="panel-heading">
				    <h3 class="panel-title">表单元素
				    <a class="btn btn-default btn-sm pull-right o-a-button" role="button" href="javascript:void(0)" onclick="history.go(-1)">返回</a>
				    </h3>
				  </div>
				  <div class="panel-body">
				  	<form role="form" class="form-horizontal">
				  		<div class="form-group">
							<label for="name" class="col-sm-2 control-label">单行文本:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="name" placeholder="输入字段">
							</div>
						</div>
				  		<div class="form-group">
							<label for="element2" class="col-sm-2 control-label">多行文本:</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" id="element2"></textarea>
							</div>
						</div>
				  		<div class="form-group">
							<label for="element3" class="col-sm-2 control-label">下拉框:</label>
							<div class="col-sm-10">
								<ossp:select dictType="city" id="element3" class_="form-control"></ossp:select>
							</div>
						</div>
				  		<div class="form-group">
							<label for="element5" class="col-sm-2 control-label">单项选择:</label>
							<div class="col-sm-10">
						         <select data-o-chosen="chosen" data-placeholder="选择一个国家" class="form-control">
						            <option value=""></option>
						            <option value="01">中国</option>
						            <option value="02">美国</option>
						            <option value="03">俄罗斯</option>
						            <option value="04">德国</option>
						            <option value="05">英国</option>
						            <option value="06">法国</option>
						         </select>
							</div>
						</div>
				  		<div class="form-group">
							<label for="element4" class="col-sm-2 control-label">复选框:</label>
							<div class="col-sm-10">
								<ossp:checkbox dictType="city" id="element4"></ossp:checkbox>
							</div>
						</div>
				  		<div class="form-group">
							<label for="element5" class="col-sm-2 control-label">单选框:</label>
							<div class="col-sm-10">
								<ossp:radio dictType="city" id="element5"></ossp:radio>
							</div>
						</div>
				  		<div class="form-group">
							<label for="element5" class="col-sm-2 control-label">时间选择:</label>
							<div class="col-sm-4">
								<div class="input-group date o-a-form-datetime" data-date="" data-date-format="yyyy-mm-dd hh:ii">
									<input class="form-control" type="text" readonly/>
									<span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="input-group date o-a-form-date" data-date="2012-06-15" data-date-format="yyyy-mm-dd">
									<input class="form-control" type="text" readonly/>
    								<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="input-group date o-a-form-time" data-date="" data-date-format="hh:ii" data-date-minView="0">
									<input class="form-control" type="text" readonly/>
    								<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
								</div>
							</div>
						</div>
				  		<div class="form-group">
							<label for="element5" class="col-sm-2 control-label">货币格式:</label>
							<div class="col-sm-10">
								<table class="table table-striped">
									<thead>
										<tr>
											<td>原数值</td>
											<td>转换后数值(默认两位小数)</td>
											<td>转换后数值(四位小数)</td>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>123.5</td>
											<td data-accounting="123.5"></td>
											<td data-accounting="123.5" data-accounting-precision="4"></td>
										</tr>
										<tr>
											<td>3456.615</td>
											<td data-accounting="3456.615"></td>
											<td data-accounting="3456.615" data-accounting-precision="4"></td>
										</tr>
										<tr>
											<td>777888.99</td>
											<td data-accounting="777888.99"></td>
											<td data-accounting="777888.99" data-accounting-precision="4"></td>
										</tr>
										<tr>
											<td>-5432</td>
											<td data-accounting="-5432"></td>
											<td data-accounting="-5432" data-accounting-precision="4"></td>
										</tr>
										<tr>
											<td>-1234567</td>
											<td data-accounting="-1234567"></td>
											<td data-accounting="-1234567" data-accounting-precision="4"></td>
										</tr>
										<tr>
											<td>0</td>
											<td data-accounting="0"></td>
											<td data-accounting="0" data-accounting-precision="4"></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
							<h3>选择对话框</h3>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">人员选择:</label>
							<div class="col-sm-10">
								<input type="hidden" id="userId"> 
								<div class="input-group">
							      <input type="text" class="form-control" id="userName" readonly="readonly">
							      <span class="input-group-btn">
							        <button class="btn btn-primary" id="userDialogMultiple" data-dialog="dialog" data-multiple="true" data-idField="userId" data-nameField="userName" data-authType="STRUCTURE" type="button">
							        	选择
							        </button>
							      </span>
							    </div>
							</div>
						</div>
				  	</form>
				  </div>
				</div>	
	<script src="${staticPath}/lib/datetimepicker/0.0.11/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
	<script src="${staticPath}/lib/datetimepicker/0.0.11/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
	<script src="${staticPath}/lib/chosen/1.1.0/chosen.jquery.js" type="text/javascript"></script>
	<script src="${staticPath}/js/ossp-jquery-chosen.js" type="text/javascript"></script>
	<script src="${staticPath}/lib/accounting/0.3.2/accounting.min.js" type="text/javascript"></script>
	<!-- 选择对话框依赖的js -->
	<script src="${staticPath}/lib/ztree/3.5/js/jquery.ztree.all-3.5.js" type="text/javascript"></script>
	<script src="${staticPath}/js/jquery-dialog.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(".o-a-form-date").datetimepicker({
	        language:  'zh-CN',
	        autoclose: true,
	        minView: 2,
	        todayBtn:  1,
	        pickerPosition: "bottom-left"
	    });
		$(".o-a-form-datetime").datetimepicker({
	        language:  'zh-CN',
	        autoclose: true,
	        pickerPosition: "bottom-left"
	    });
		$(".o-a-form-time").datetimepicker({
	        language:  'zh-CN',
			autoclose: 1,
			startView: 1,
			maxView: 1,
	        pickerPosition: "bottom-left"
	    });
		$(document).ready(function (){
			$(".chosen-select").chosen({});
			//货币格式化
			$('[data-accounting]').each(function (){
				var $this = $(this);
				if($this.attr("data-accounting-precision") && ""!=$this.attr("data-accounting-precision")){
					$this.html(accounting.formatMoney($this.attr("data-accounting"),"¥ ",$this.attr("data-accounting-precision")*1));
				}else{
					$this.html(accounting.formatMoney($this.attr("data-accounting"),"¥ "));
				}
			});
		});
	</script>
</body>
</html>